@extends('admin.layout')
@section('content')
    @if ($message = Session::get('success'))
        <div class="layui-card">
            <div class="layui-card-header">提示！</div>
            <div class="layui-card-body">
                <p>{{ $message }}</p>
            </div>
        </div>
    @endif
    <div class="layui-card">
        <div class="layui-card-header">
            <form class="layui-form" method="get">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="id" value="" autocomplete="off" placeholder="图片ID" class="layui-input"/>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="name" value="" autocomplete="off" placeholder="图片名称" class="layui-input"/>
                    </div>

                    <div class="layui-input-inline" style="width: 50px;">
                        <button class="layui-btn layui-btn-primary " lay-submit lay-filter="search"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </form>
            <div class="layui-btn-group layui-left-menu">
                <a  class="layui-btn add-image"><i class="fa fa-plus-circle"></i> 上传图片</a>
                <a  href="{{route('admin.goods.brand.destroy')}}" class="layui-btn layui-btn-danger ajax-batch-del"><i class="fa fa-trash-o"></i> 批量删除</a>

            </div>
        </div>
        <div class="layui-card-body">


            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    <a  class="layui-btn layui-btn-danger layui-btn-sm ajax-del" href="{{route('admin.images.destroy')}}" data-id="@{{d.id}}" >删除</a>
                </div>
            </script>


        </div>
    </div>
    <textarea id="edit_image" style="display: none;"></textarea>
@endsection

@section('script')

    <script>
        layui.use(['table','form','layer','jquery'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;

            var dataTable = table.render({
                elem: '#dataTable'
                ,url: "{{ route('admin.images.data') }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true,fixed: true}
                    ,{field: 'id', title: 'ID', sort: true,width:280}
                    ,{field: 'name', title: '名称'}
                    ,{field: 'type_text', title: '类型'}
                    ,{field: 'url',title: '缩略图', templet: function(data){
                        return '<a  class="view-img" href="'+data.url+'" ><image style="max-width:36px;max-height:36px;" src="'+data.url+'"/></a>';
                    }}
                    ,{field: 'url', title: '图片地址'}
                    ,{field: 'created_at', title: '创建时间'}
                    ,{fixed: 'right',  align:'center', toolbar: '#options'}
                ]]
            });

            var _editor = UE.getEditor("edit_image",{
                initialFrameWidth:800,
                initialFrameHeight:300,
                single:true
            });
            _editor.ready(function (){
                _editor.hide();
                _editor.addListener('beforeInsertImage',function(t,arg){
                    console.log(arg);
                    console.log(t);

                    if(arg.length>5){
                        layer.msg("最多只能选择5张图片，请重新选择");
                        return false;
                    }
                    if(arg.length>0) {
                      //  imageTable.reload();
                    }else{
                        layer.msg("请先上传图片");
                        return false;
                    }
                });
            });

            $(document).on('click','.add-image',function(){
                upImage();
            });
            //上传dialog
            function upImage(){
                var myImage = _editor.getDialog("insertimage");
                myImage.open();
            }
            /*function upImage(){
                var obj = _editor.queryCommandValue("serverparam");
                obj.type = "goods";
                var myImage = _editor.getDialog("insertimage");
                myImage.open();
            }*/




        });
    </script>
@endsection